<script setup name="login">
import { ref } from 'vue';
import { useStore } from 'vuex';
// 路由
import { useRouter, useRoute } from 'vue-router';
import { reactive } from 'vue';


import { throttle } from 'lodash';

import { CODE_WAIT_TIME } from '@/constants';
import * as useApi from '@/api/user';

const store = useStore();
const router = useRouter(); // 编程式导航
const route = useRoute(); // 路由取值

const account = localStorage.getItem('account') || '';
const password = localStorage.getItem('password') || '';
const isMemo = localStorage.getItem('isMemo') === 'true' || true;

const params = reactive({
  // account: 'xiaotuxian001',
  // password: '123456',
  account: isMemo ? account : '',
  password: isMemo ? password : '',
  isMemo,
  isAgree: false,
  mobile: '13888888888',
  code: '123456',
  // mobile: '',
  // code: '',
});

// 账号密码登入
async function onLoginWithAccount() {
  const res = await store.dispatch('user/login', params);
  if (res.success) {
    // 如果勾选了记住我 就记录相关数据
    if (params.isMemo) {
      localStorage.setItem('account', params.account);
      localStorage.setItem('password', params.password);
      localStorage.setItem('isMemo', params.isMemo);
    }
    router.go(-1);
  } else {
    // 失败了清空密码
    params.password = '';
  }
}
// 验证码登入
async function onLoginWithCode() {
  console.log(1);
}


const IsAccount = ref(true);
// 表单验证
const rules = reactive({
  account: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // 字母开头 6-20个字符
    { pattern: /^[a-zA-Z][a-zA-Z0-9]{5,19}$/, message: '字母开头6-20个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 24, message: '长度在 6 到 24 个字符', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '长度为6位', trigger: 'blur' },
  ],
});

// 验证码 还是 账号密码
const howWay = ref(false);

// 发送验证码
const countDown = ref(CODE_WAIT_TIME);

// 发验证码请求函数
// 发送验证码要节流，防止老坏痞
const sendCodeWithCheckSuccess = throttle(function() {
  let timer = null;
  useApi.loginWithCode(params.mobile)
    .then((msg) => {
      ElMessage({
        message: msg,
        type: 'success',
      });
    })
    .catch((err) => {
      ElMessage({
        message: err,
        type: 'error',
      });
    });
  countDown.value = CODE_WAIT_TIME - 1; // 倒计时秒数
  timer = setInterval(() => {
    countDown.value--;
    if (countDown.value < 1) {
      clearInterval(timer);
      countDown.value = CODE_WAIT_TIME; // 结束倒计时恢复60s
    }
  }, 1000);
}, CODE_WAIT_TIME * 1000);

function sendCode() {
  if (!/^1[3456789]\d{9}$/.test(params.mobile)) {
    return;
  }
  sendCodeWithCheckSuccess();
}

</script>

<template>
  <header>
    <h1 class="logo"><a href="#/"></a></h1>
    <h3 class="sub">欢迎登录</h3>
    <div class="go-home">
      <a href="#/">
        进入网站首页
        <div class="icons">
          <icon name="right" color="#27ba9b" class="right"/>
          <icon name="right" color="#27ba9b" class="right"/>
        </div>
      </a>
    </div>
  </header>
  <main>
    <div class="logoin-card">
      <div class="tabs">
        <div
          :class="{
            'tabs-btn': true,
            'tabs-btn-on': IsAccount,
          }"
          @click="IsAccount = true"
        >
          账户登录
        </div>
        <span>|</span>
        <div
          :class="{
            'tabs-btn': true,
            'tabs-btn-on': !IsAccount,
          }"
          @click="IsAccount = false"
        >
          扫码登入
        </div>
      </div>
      <div
        class="logoin-card-account"
        v-if="IsAccount"
      >
        <div class="way">
          <div @click="howWay = !howWay">
            <i-ep-message v-show="howWay"/>
            <i-ep-user v-show="!howWay"/>
            <span class="way-test">{{ howWay ? '使用账号登录' : '使用短信登录' }}</span>

          </div>
        </div>
        <!-- 表单 -->
        <el-form :model="params" :rules="rules">
          <!-- 账号密码登入 -->
          <div v-if="!howWay">
            <el-form-item prop="account">
              <el-input
                placeholder="请输入用户名"
                class="inp"
                v-model="params.account"
              >
                <template #prefix>
                  <i-ep-user class="icon" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                placeholder="请输入密码"
                class="inp"
                v-model="params.password"
                type="password"
              >
                <template #prefix>
                  <i-ep-lock class="icon" />
                </template>
              </el-input>
            </el-form-item>
          </div>
          <!-- 短信登入 -->
          <div v-else>
            <el-form-item prop="mobile">
              <el-input
                placeholder="手机号"
                class="inp"
                v-model="params.mobile"
              >
                <template #prefix>
                  <i-ep-user class="icon" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input
                placeholder="请输入验证码"
                class="inp"
                v-model="params.code"
              >
                <template #prefix>
                  <i-ep-lock class="icon" />
                </template>
                <template #suffix>
                  <el-button
                    @click="sendCode"
                    :disabled="countDown !== CODE_WAIT_TIME"
                  >
                    <!-- 倒计时 -->
                    {{ countDown === CODE_WAIT_TIME ? '获取验证码' : countDown + 's' }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <!-- 多选框 -->
          <el-form-item >
            <el-checkbox
              label="记住我"
              v-model="params.isMemo"
            />
            <el-checkbox
              v-model="params.isAgree"
            >
              <template #default>
                <span>我已同意</span>
                <a href="javascript:;" class="clause">《隐私条款》</a>
                <span data-v-7453d80e="">和</span>
                <a href="javascript:;" class="clause">《服务条款》</a>
              </template>
            </el-checkbox>
          </el-form-item>
          <!-- 登入按钮 -->
          <el-form-item>
            <el-button
              class="login-btn"
              type="success"
              :disabled="!params.isAgree"
              @click="() => howWay ? onLoginWithCode() : onLoginWithAccount()"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div
        class="logoin-card-QR"
        v-else
      >
        2qr
      </div>
    </div>
  </main>
  <footer>
  </footer>
</template>

<style lang="scss" scoped>
// @import '@/assets/style/common';
  header {
    @include w;
    display: flex;
    align-items: flex-end;
    margin: 0 auto;
    height: 132px;

    .logo {
      height: 132px;
      width: 200px;
      background: url('../../assets/imgs/logo.0940ebb5.png') no-repeat center 18px/contain;

      a {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    h3 {
      flex: 1;
      font-size: 24px;
      font-weight: 400;
      margin-bottom: 38px;
      margin-left: 20px;
      color: #666;
    }

    .go-home {
      width: 150px;
      margin-bottom: 38px;
      font-size: 16px;

      a {
        display: flex;
        align-items: flex-end;
        justify-content: space-evenly;
        text-decoration: none;
        color: #333;
        .icons {
          display: flex;
          align-items: end;
          .right {
            width: 16px;
            height: 16px;
            margin-left: -8px;
          }
        }
      }
    }
  }

  main {
    height: 488px;
    min-width: $w;
    background: url(@/assets/imgs/login-bg.696efec3.png) no-repeat 50%/cover;
    position: relative;

    .logoin-card {
      background-color: #fff;
      width: 380px;
      height: 380px;
      position: absolute;
      left: 56%;
      top: 54px;

      .tabs {
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        height: 55px;
        border-bottom: 1px solid $line;
        margin: 0 40px;
        align-items: center;

        &:hover {
          cursor: pointer;
        }

        span {
          font-size: 14px;
          color: $line;
        }
        .tabs-btn {
          height: 100%;
          line-height: 55px;
          flex: 1;

          &:last-child {
            text-align: right;
          }
        }

        .tabs-btn-on {
          font-weight: 700;
          color: $green;
        }
      }
        .logoin-card-account {
          padding: 0 40px;
          height: 325px;

          .way{
            color: $green;
            padding: 15px 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            & > div {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            & :nth-child(n){
              cursor: pointer;
            }
          }

          .inp {
            height: 36px;
            line-height: 36px;
            width: 100%;

            :deep(.el-button) {
              height: 36px;
              border: 0;
            }

            :deep(.el-input__wrapper) {
              padding: 0;
              box-shadow: 0 0 0 1px #cfcdcd;
            }
            :deep(.el-input__inner) {
              padding: 0 10px;
            }
            :deep(.el-input__prefix) {
              box-sizing: border-box;
              // width: 34px;
              // height: 34px;
              padding: 0;
              background: #cfcdcd;
            }
            :deep(.el-input__prefix-inner > :last-child) {
              margin: 0px;
              padding: 8px;
            }
            .icon {
              font-size: 12px;
              color: #fff;
            }
          }
          // checkbox
          :deep(.el-checkbox-group) {
            display: flex;
            flex-direction: column;
          }
          // login-btn
          .login-btn {
            width: 100%;
            height: 40px;
            border-radius: 0;
          }
        }
        :deep(.el-form-item.is-error .el-input__wrapper) {
              box-shadow: 0 0 0 1px var(--el-color-danger);
        }
        .clause{
          color: #006699;
        }
    }
  }
</style>
